<template>
	<echarts theme="shine" :option="currentOptions" :loading="loading" ref="echart" style="min-height: 100%"></echarts>
</template>
<script>

	/*
	 * 包装了echarts组件，实现自动查询功能
	 */

	import Vue from 'vue';
	import ElementUI from 'element-ui';
	//import Echarts from 'vue-echarts-v3';

    import Echarts from 'vue-echarts-v3/src/lite.vue'
    //导入需要的图表类型
	import 'vue-echarts-v3/node_modules/echarts/lib/chart/bar'
	import 'vue-echarts-v3/node_modules/echarts/lib/chart/pie'
	import 'vue-echarts-v3/node_modules/echarts/lib/chart/line'
	import 'vue-echarts-v3/node_modules/echarts/lib/component/legend'
	import 'vue-echarts-v3/node_modules/echarts/lib/component/dataZoom'
	import 'vue-echarts-v3/node_modules/echarts/lib/component/tooltip'

	import request from '../utils/axios';
	import '../vendor/echarts/shine';

	Vue.use(ElementUI);
	Vue.component('echarts', Echarts);

	export default {
		name: 'wt-chart',
		props: {
			query: {
				type: Object,
				required: true
			},
			options: {
				type: Object,
				default: {}
			},
			autoLoad: {
				type: Boolean,
				default: true
			},
            value:{
			    type: Array,
				default: []
			},
			customData: {
				type: Function,
				default: undefined
			},
		},
		data() {
			return {
				currentOptions: this.options,
				loading: true,
                currentValue:this.value,
			}
		},
		methods: {
			load() {
				let _this = this;
				let data = {};
				this.loading = true;
				request(this.query.url, this.query.method, null, this.query.transfer, function(data) {
					_this.loading = false;
					_this.setQueryResult(data);
				}, function (error) {
					_this.loading = false;
					console.error(error);
					_this.showQueryError();
				});
			},

			setQueryResult(data) {
				if (typeof data == 'string') {
					data = JSON.parse(data);
				}
				let xAxis = [];
				let series = [];
				let options = null;
				if(this.customData) {
					options = this.customData(data);
				}
				else {
					for (let item in data) {
						for(let i in data[item]) {
							xAxis.push(i);
							series.push(data[item][i]);
						}
					}
					options = {
						series: {
							name: this.options.series[0].name,
							data: series
						}
					};
					if (this.options.xAxis) {
						options.xAxis = {
							data: xAxis,
						};
					}
				}
				// echarts 会自动merge options，不用担心初始化时的options被覆盖
				this.currentOptions = options;
				this.loading = false;
			},
			bartype(data){

				for (let item in data) {
					for(let i in data[item]) {
						xAxis.push(i);
						series.push(data[item][i]);

					}
				}
			},
			pietype(data){
				let xAxis = [];
				let series = [];
				for (let item in data) {
					for(let i in data[item]) {
						xAxis.push(i);
						series.push({
							value:data[item][i],
							name:i
						})

					}
				}
			},
			showQueryError() {
				this.$message.error('报表查询出错');
			}
		},
		mounted() {
		    if (this.currentValue != null){
		        let _this = this;
		        // 需要等待下一个tick设置数据，让表格options初始化完成
		        Vue.nextTick(function() {
                    _this.setQueryResult(_this.currentValue)
				});
			}
			else if (this.autoLoad) {
				this.load();
			}
			// 这句话会引起报错，暂时注释掉
			// this.$refs.echart.resizable = true
		},
	}
</script>
